<script setup lang="ts">
import type { PropType } from "vue"
import type { UserInfo } from "@/api/base"
import { baseUrl } from '@/config'
defineProps({
  data: {
    type: Object as PropType<UserInfo>,
    default: () => ({})
  },
  phone: {
    type: Boolean,
    default: false
  }
})
const showPhone = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}
</script>

<template>
  <view class="userinfo">
    <view class="userinfo-left">
      <uv-avatar class="userinfo-avatar" v-if="data.avatar" :src="baseUrl + data.avatar"></uv-avatar>
      <uv-avatar class="userinfo-avatar" v-else></uv-avatar>
    </view>
    <view class="userinfo-right">
      <uv-text size="28rpx" color="#333" lineHeight="40rpx" :text="data.nickname"></uv-text>
      <uv-text class="userinfo-timeAgo" size="24rpx" color="#999" :text="data.timeAgo"></uv-text>
    </view>
    <view class="userinfo-phone" v-show="phone">
      <uv-icon name="phone-fill" size="28" color="#2979ff" @click="showPhone(data.phone)"></uv-icon>
    </view>
    <slot></slot>
  </view>
</template>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  justify-content: left;
  flex-direction: row;
  padding: 20rpx;
  background-color: #fff;

  .userinfo-right {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    width: calc(100% - 100rpx);
  }

  .userinfo-phone {
    text-align: right;
  }
}
</style>
